<template>
	<view class="container">
		<image class="top-bg" mode="scaleToFill" :src="bgsrc"></image>
		<view class="top-cont box box_v box_i_center box_center">
			<view class="top-cont-h1">智慧商城</view>
			<view class="top-cont-h2">字画产品区块链溯源</view>
		</view>
		<view class="card">
			<view class="card-tag">凭证</view>
			<view class="card-title">唯一身份编码</view>
			<view class="card-line"></view>
			<view>
				<view class="card-h1">唯一身份编码</view>
				<view class="card-h2">{{ code }}</view>
				<view class="card-h1" style="margin-top: 15rpx;">区块链Hash</view>
				<view class="card-h2">n8DUF5fjEP9BYNOLG42ZTb3uSwzKl1sMi6qXk0gmRQrhcvAydJHeVxoa7ptWCI</view>
			</view>
		</view>
		<view class="card">
			<view class="card-cont" style="line-height: 2; font-size: 24rpx;">
				<view>查询结果</view>
				<view v-for="item in searchLits" :key="item.id">
					于{{ item.h1 }} 在 {{ item.h2 }} 扫码查询
				</view>
			</view>
			<view class="card-bg-1"></view>
		</view>
		<view class="card">
			<view class="card-image">
				<image class="card-image-i" mode="aspectFill" :src="goodsInfo.logo"></image>
			</view>
			<view class="card-title">产品信息</view>
			<view class="card-line"></view>
			<view>
				<view class="box card-info" v-for="item in infoList" :key="item.id">
					<view class="box_f1">{{ item.h1 }}</view>
					<view>{{ item.h2 }}</view>
				</view>
			</view>
			<view class="card-button" @click="goInfo">点击进入商城</view>
		</view>
		<view class="card-line-v">
			<view class="card-line-l" style="left: 100rpx;">
				<view class="card-line-ll"></view>
			</view>
			<view class="card-line-l" style="right: 100rpx;">
				<view class="card-line-ll"></view>
			</view>
		</view>
		<view class="card" style="margin-top: 0;">
			<view class="card-title">商品溯源体系</view>
			<view class="card-line"></view>
			<view style="padding: 20rpx;">
				<view class="card-textcont">
					这幅古代字画，承载着岁月的痕迹…… 它出自古代名家之手，是一种珍贵的文化遗产。
				</view>
			</view>
			<view>
				<view class="flow">
					<view class="flow-item" v-for="item in qklList" :key="item.id">
						<view class="flow-item-time">{{ item.time }}</view>
						<view class="flow-item-h1">{{ item.h1 }}</view>
						<view>区块链Hash</view>
						<view class="flow-item-h2">{{ item.h2 }}</view>
					</view>
				</view>
				<view class="card-title" style="color: #333; margin: 30rpx 0; font-weight: normal;">--- 制作记录 ---</view>
				<view class="his">
					<view class="his-img">
						<image class="his-img-i" mode="aspectFill" :src="goodsInfo.logo"></image>
					</view>
					<view class="his-flow box">
						<view class="his-flow-left box_f1">
							<view class="his-flow-hang" v-for="(item, index) in hisList" :key="item.id"
								v-if="index % 2 === 1">
								<view class="his-flow-hang-h1">{{ item.h1 }}</view>
								<view class="his-flow-hang-h2">{{ item.h2 }}</view>
								<view class="his-flow-hang-image"></view>
							</view>
						</view>
						<view class="his-flow-right box_f1">
							<view class="his-flow-hang" v-for="(item, index) in hisList" :key="item.id"
								v-if="index % 2 === 0">
								<view class="his-flow-hang-h1">{{ item.h1 }}</view>
								<view class="his-flow-hang-h2">{{ item.h2 }}</view>
								<view class="his-flow-hang-image"></view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { scan } from '@/api/suyuan'
export default {
	onShow() {
		this.code = this.$query("code");
		if (this.code) {
			scan(this.code).then(res => {
				const data = res.data;
				if (data) {
					this.goodsInfo = data.goodsInfo;
					this.infoList = [
						{
							id: "11",
							h1: '产品名称',
							h2: this.goodsInfo.name
						},
						{
							id: "1fwe1",
							h1: '商品分类',
							h2: this.goodsInfo.cateId
						},
						{
							id: "11231",
							h1: '商品编号',
							h2: this.goodsInfo.goodsNo
						},
						{
							id: "1141",
							h1: '上架时间',
							h2: this.goodsInfo.createTime
						}
					]
				} else {
					uni.showModal({
						title: '提示',
						content: '该商品不存在',
						success:res=>{
							this.$navTo('pages/index/index');
						}
					})
				}
			}).catch(err => {
				console.log(err)
			})
		}
	},
	data() {
		return {
			code: "",
			goodsInfo: {},
			bgsrc: "https://my-farm.oss-cn-beijing.aliyuncs.com/fangwei/WechatIMG7930.jpg",
			searchLits: [
				{
					id: "12",
					h1: '2025-5-5 22:33:22',
					h2: '北京',
				},{
					id: "412",
					h1: '2025-5-6 13:21:56',
					h2: '北京',
				}
			],
			infoList: [],
			hisList: [
				{
					id: "11",
					h1: '产品名称0',
					h2: '2002-12-11',
					image: ''
				}, {
					id: "22",
					h1: '产品名称1',
					h2: '2002-12-11',
					image: ''
				}, {
					id: "33",
					h1: '产品名称2',
					h2: '2002-12-11',
					image: ''
				}, {
					id: "44",
					h1: '产品名称3',
					h2: '2002-12-11',
					image: ''
				}, {
					id: "55",
					h1: '产品名称4',
					h2: '2002-12-11',
					image: ''
				}, {
					id: "66",
					h1: '产品名称5',
					h2: '2002-12-11',
					image: ''
				}
			],
			qklList: [
				{
					id: "11sasd",
					time: "2025-5-14 20:24:24",
					h1: "交易时间区块链",
					h2: "n8DUF5fjEP9BYNOLG42ZTb3uSwzKl1sMi6qXk0gmRQrhcvAydJHeVxoa7ptWCI"
				},
				{
					id: "11fgsd",
					time: "2025-5-14 20:24:24",
					h1: "交易时间区块链",
					h2: "n8DUF5fjEP9BYNOLG42ZTb3uSwzKl1sMi6qXk0gmRQrhcvAydJHeVxoa7ptWCI"
				},
				{
					id: "1gasd",
					time: "2025-5-14 20:24:24",
					h1: "交易时间区块链",
					h2: "n8DUF5fjEP9BYNOLG42ZTb3uSwzKl1sMi6qXk0gmRQrhcvAydJHeVxoa7ptWCI"
				}
			]
		}
	},
	methods: {
		goInfo() {
			this.$navTo(`pages/goods/detail`, { goodsId: this.goodsInfo.id })
		}
	}
}
</script>

<style lang="scss" scoped>
$bgcolor: #d9ecd3;
$bgcolor1: #91c3b8;
$btncolor: #2a7560;

.container {
	position: relative;
	width: 100%;
	min-height: 100vh;
	height: auto;
	box-sizing: border-box;
	padding: 60rpx 35rpx;
	background-color: $bgcolor;

	.top-bg {
		position: absolute;
		width: 100%;
		height: 1036rpx;
		left: 0;
		top: 0;
		z-index: 0;
	}
	.top-cont {
		position: relative;
		z-index: 10;
		width: 100%;
		height: 180rpx;
		color: $btncolor;
		.top-cont-h1 {
			font-weight: 600;
			font-size: 55rpx;
			margin-bottom: 30rpx;
			color: $btncolor;
		}
		.top-cont-h2 {
			font-size: 40rpx;
			color: $btncolor;
		}
	}
	.card {
		position: relative;
		width: auto;
		min-height: 130rpx;
		box-sizing: border-box;
		padding: 35rpx;
		background-color: #fff;
		border-radius: 20rpx;
		margin-top: 35rpx;
		overflow: hidden;
		z-index: 5;

		.card-tag {
			position: absolute;
			right: -35rpx;
			top: 18rpx;
			color: #fff;
			font-size: 26rpx;
			line-height: 30rpx;
			height: 30rpx;
			width: 150rpx;
			text-align: center;
			background-color: #f8bb00;
			transform: rotate(45deg);
			transform-origin: center center;
		}

		.card-title {
			position: relative;
			width: 100%;
			font-size: 32rpx;
			line-height: 32rpx;
			font-weight: bold;
			color: $bgcolor1;
			text-align: center;
		}

		.card-textcont {
			position: relative;
			width: 100%;
			font-size: 26rpx;
			line-height: 1.5;
			padding: 25rpx;
			background-color: $bgcolor;
			color: $btncolor;
			white-space: pre-wrap;
			word-wrap: break-word;
			border-radius: 20rpx;
		}

		.card-h1 {
			font-size: 23rpx;
			line-height: 1.5;
			color: #888;
		}

		.card-h2 {
			font-size: 22rpx;
			line-height: 1.5;
			font-weight: 600;
			white-space: pre-wrap;
			word-wrap: break-word;
		}

		.card-cont {
			position: relative;
			z-index: 10;
			color: #fff;
		}

		.card-image {
			position: relative;
			width: 100%;
			height: 330rpx;
			background-color: #f2f2f2;
			border-radius: 20rpx;
			margin-bottom: 30rpx;
			.card-image-i {
				position: relative;
				width: 100%;
				height: 100%;
				border-radius: 20rpx;
			}
		}

		.card-info {
			position: relative;
			height: 90rpx;
			border-bottom: 1rpx dashed #efefef;
			font-size: 30rpx;
			line-height: 90rpx;

			.box_f1 {
				color: #888;
			}
		}

		.card-button {
			position: relative;
			width: 310rpx;
			height: 80rpx;
			line-height: 80rpx;
			margin: 30rpx auto;
			color: #fff;
			text-align: center;
			font-size: 28rpx;
			background-color: $btncolor;
			border-radius: 40rpx;
		}

		.card-line {
			position: relative;
			width: 100%;
			height: 0;
			box-sizing: border-box;
			border-bottom: 1rpx dashed #7e7e7e;
			margin: 25rpx 0;
		}

		.card-line::after {
			content: '';
			position: absolute;
			width: 50rpx;
			height: 50rpx;
			border-radius: 50%;
			background-color: $bgcolor;
			left: -60rpx;
			top: -24rpx;
		}

		.card-line::before {
			content: '';
			position: absolute;
			width: 50rpx;
			height: 50rpx;
			border-radius: 50%;
			background-color: $bgcolor;
			right: -60rpx;
			top: -24rpx;
		}
	}

	.card-bg-1 {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		color: #fff;
		z-index: 0;
	}

	.card-bg-1::before {
		content: '';
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background-color: $bgcolor1;
		z-index: 0;
		border-radius: 20rpx;
	}

	.card-bg-1::after {
		content: '';
		position: absolute;
		bottom: -8rpx;
		left: 0;
		right: 0;
		height: 30rpx;
		background-color: rgba(0, 0, 0, 0.3);
		border-radius: 0 0 25rpx 25rpx;
		z-index: -2;
	}

	.card-line-v {
		position: relative;
		width: 100%;
		height: 35rpx;

		.card-line-l {
			position: absolute;
			top: -30rpx;
			bottom: -30rpx;
			width: 12rpx;
			z-index: 10;
			border-radius: 10rpx;

			.card-line-ll {
				position: relative;
				width: 100%;
				height: 100%;
				z-index: 10;
				background-color: #fff;
				border-radius: 10rpx;
			}
		}

		.card-line-l::before {
			content: '';
			position: absolute;
			top: -14rpx;
			left: -8rpx;
			width: 28rpx;
			height: 28rpx;
			border-radius: 50%;
			background-color: $bgcolor;
		}

		.card-line-l::after {
			content: '';
			position: absolute;
			bottom: -14rpx;
			left: -8rpx;
			width: 28rpx;
			height: 28rpx;
			border-radius: 50%;
			background-color: $bgcolor;
		}
	}

	.flow {
		.flow-item {
			position: relative;
			width: 100%;
			height: auto;
			padding: 30rpx;
			border-left: 1rpx solid $bgcolor1;

			.flow-item-time {
				position: relative;
				color: $bgcolor1;
				font-size: 26rpx;
				line-height: 30rpx;
			}

			.flow-item-h1 {
				position: relative;
				font-size: 24rpx;
				line-height: 30rpx;
				color: #888;
				margin-bottom: 10rpx;
			}

			.flow-item-h2 {
				position: relative;
				font-size: 25rpx;
				line-height: 30rpx;
				color: #888;
				margin-top: 10rpx;
				white-space: pre-wrap;
				word-wrap: break-word;
			}
		}

		.flow-item::before {
			content: '✔';
			position: absolute;
			width: 30rpx;
			height: 30rpx;
			border-radius: 50%;
			background-color: $bgcolor1;
			left: -16rpx;
			color: #fff;
			font-size: 20rpx;
			text-align: center;
			line-height: 30rpx;
		}
	}

	.his {
		position: relative;
		width: 100%;
		height: auto;

		.his-img {
			position: relative;
			width: 100%;
			height: 290rpx;
			border-radius: 10rpx;
			background-color: #eee;
			.his-img-i {
				position: relative;
				width: 100%;
				height: 100%;
			}
		}

		.his-flow {
			position: relative;
			width: 100%;
			height: auto;
			margin-top: 30rpx;

			.his-flow-hang {
				position: relative;
				width: 100%;
				height: 300rpx;
				padding: 20rpx;
				margin-top: 150rpx;

				// background-color:red;
				.his-flow-hang-image {
					position: relative;
					width: 100%;
					height: 185rpx;
					background-color: #eee;
				}

				.his-flow-hang-h1 {
					font-size: 30rpx;
				}

				.his-flow-hang-h2 {
					font-size: 28rpx;
					color: #666;
					margin-bottom: 15rpx;
					margin-top: 5rpx;
				}
			}

			.his-flow-left {
				position: relative;
				width: 100%;
				height: auto;
				text-align: right;
				border-right: 1px solid $bgcolor1;

				.his-flow-hang::after {
					content: '';
					position: absolute;
					top: 20rpx;
					right: -10rpx;
					width: 20rpx;
					height: 20rpx;
					border-radius: 50%;
					background-color: $bgcolor1;
					z-index: 10;
				}
			}

			.his-flow-right {
				position: relative;
				width: 100%;
				height: auto;
				border-left: 1px solid $bgcolor1;

				.his-flow-hang:first-child {
					margin-top: 0;
				}

				.his-flow-hang::after {
					content: '';
					position: absolute;
					top: 20rpx;
					left: -10rpx;
					width: 20rpx;
					height: 20rpx;
					border-radius: 50%;
					background-color: $bgcolor1;
					z-index: 10;
				}
			}
		}
	}
}
</style>
